<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->

<template>
  <div class="flex min-h-screen">
    <!-- 左侧导航 -->
    <el-menu class="w-64 min-h-screen !border-none" :default-active="activeIndex">
      <div class="p-4 border-b border-gray-200">
        <div class="text-xl font-bold text-primary">工业互联网平台</div>
      </div>
      <el-menu-item v-for="(item, index) in navItems" 
                    :key="index" 
                    :index="index.toString()"
                    @click="handleNavClick(index)"
                    class="!px-4 !py-3">
        <el-icon>
          <HomeFilled v-if="item.icon === 'fas fa-home'" />
          <TrendCharts v-else-if="item.icon === 'fas fa-chart-line'" />
          <Office v-else-if="item.icon === 'fas fa-building'" />
          <Link v-else-if="item.icon === 'fas fa-link'" />
          <School v-else-if="item.icon === 'fas fa-graduation-cap'" />
          <Service v-else-if="item.icon === 'fas fa-handshake'" />
        </el-icon>
        <span class="ml-3">{{ item.title }}</span>
      </el-menu-item>
    </el-menu>

    <!-- 右侧内容 -->
    <div class="flex-1 p-8">
      <!-- 顶部导航 -->
      <div class="flex justify-between items-center mb-8">
        <div class="flex items-center">
          <div class="text-2xl font-bold text-gray-800">{{ currentPage }}</div>
        </div>
        <div class="flex items-center">
          <el-input
            v-model="searchInput"
            placeholder="搜索..."
            class="!w-64 mr-4"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
          <el-avatar :size="40" :icon="UserFilled" />
        </div>
      </div>

      <!-- 数据概览 -->
      <div class="grid grid-cols-4 gap-4 mb-6">
        <el-card v-for="(card, index) in overviewCards" 
                :key="index" 
                class="!border-none !bg-primary hover:!shadow-lg transition-shadow">
          <div class="text-sm text-white/80 mb-2">{{ card.title }}</div>
          <div class="text-2xl font-bold text-white">{{ card.value }}</div>
          <div class="text-sm text-white mt-2">
            <el-icon class="mr-1">
              <ArrowUp v-if="card.trend > 0"/>
              <ArrowDown v-else/>
            </el-icon>
            <span>{{ Math.abs(card.trend) }}%</span>
          </div>
        </el-card>
      </div>

      <!-- 图表区域 -->
      <div class="grid grid-cols-2 gap-4">
        <!-- 经济运行趋势 -->
        <el-card class="!border-none">
          <template #header>
            <div class="flex justify-between items-center">
              <span class="text-lg font-bold text-gray-800">经济运行趋势</span>
            </div>
          </template>
          <div ref="economicTrendChart" class="chart-container"></div>
        </el-card>

        <!-- 能耗分析 -->
        <el-card class="!border-none">
          <template #header>
            <div class="flex justify-between items-center">
              <span class="text-lg font-bold text-gray-800">能耗分析</span>
            </div>
          </template>
          <div ref="energyConsumptionChart" class="chart-container"></div>
        </el-card>

        <!-- 企业全景 -->
        <el-card class="!border-none">
          <template #header>
            <div class="flex justify-between items-center">
              <span class="text-lg font-bold text-gray-800">企业全景</span>
            </div>
          </template>
          <div ref="enterpriseOverviewChart" class="chart-container"></div>
        </el-card>

        <!-- 经济效益指标 -->
        <el-card class="!border-none">
          <template #header>
            <div class="flex justify-between items-center">
              <span class="text-lg font-bold text-gray-800">经济效益指标</span>
            </div>
          </template>
          <div class="grid grid-cols-3 gap-4">
            <div v-for="(indicator, index) in economicIndicators" :key="index" class="text-center">
              <el-icon :size="24" class="text-primary mb-2">
                <TrendCharts v-if="indicator.icon === 'fas fa-chart-line'" />
                <Money v-else-if="indicator.icon === 'fas fa-money-bill-wave'" />
                <Coin v-else-if="indicator.icon === 'fas fa-coins'" />
              </el-icon>
              <div class="text-sm text-gray-500 mb-2">{{ indicator.title }}</div>
              <div class="text-xl font-bold text-gray-800">{{ indicator.value }}</div>
              <div class="text-sm text-green-500">
                <el-icon><ArrowUp /></el-icon>
                <span>{{ indicator.growth }}%</span>
              </div>
            </div>
          </div>
        </el-card>

        <!-- 环保概览 -->
        <el-card class="!border-none">
          <template #header>
            <div class="flex justify-between items-center">
              <span class="text-lg font-bold text-gray-800">环保概览</span>
            </div>
          </template>
          <div ref="environmentalProtectionChart" class="chart-container"></div>
        </el-card>

        <!-- 高企培育 -->
        <el-card class="!border-none">
          <template #header>
            <div class="flex justify-between items-center">
              <span class="text-lg font-bold text-gray-800">高企培育</span>
            </div>
          </template>
          <div class="flex items-center">
            <div ref="highTechEnterpriseChart" class="w-1/2 h-64"></div>
            <div class="w-1/2 pl-6">
              <div v-for="(stat, index) in highTechStats" :key="index" class="mb-4">
                <div class="text-sm text-gray-500">{{ stat.title }}</div>
                <div class="text-xl font-bold text-gray-800">{{ stat.value }}</div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';
import { 
  HomeFilled,
  TrendCharts,
  Office,
  Link,
  School,
  Service,
  Search,
  UserFilled,
  ArrowUp,
  ArrowDown,
  Money,
  Coin
} from '@element-plus/icons-vue';

const economicTrendChart = ref<HTMLElement | null>(null);
const energyConsumptionChart = ref<HTMLElement | null>(null);
const enterpriseOverviewChart = ref<HTMLElement | null>(null);
const environmentalProtectionChart = ref<HTMLElement | null>(null);
const highTechEnterpriseChart = ref<HTMLElement | null>(null);
const searchInput = ref('');
const activeIndex = ref('0');

let charts: echarts.ECharts[] = [];

const navItems = ref([
  { title: '主页面', icon: 'fas fa-home', active: true },
  { title: '经济运行分析', icon: 'fas fa-chart-line', active: false },
  { title: '企业健康档案', icon: 'fas fa-building', active: false },
  { title: '产业链管理', icon: 'fas fa-link', active: false },
  { title: '高企培育', icon: 'fas fa-graduation-cap', active: false },
  { title: '企业服务', icon: 'fas fa-handshake', active: false }
]);

const handleNavClick = (index: number) => {
  activeIndex.value = index.toString();
  navItems.value.forEach((item, i) => {
    item.active = i === index;
  });
};

const currentPage = ref('主页面');

const overviewCards = ref([
  { title: '财政总收入', value: '¥ 883.5 亿', trend: 8.5 },
  { title: '一般公共预算收入', value: '¥ 158.2 亿', trend: 5.2 },
  { title: '固定资产投资总额', value: '¥ 601.8 亿', trend: -2.3 },
  { title: '限上消费品零售额', value: '¥ 103.4 亿', trend: 6.7 }
]);

const economicIndicators = ref([
  { title: '累计实现营业收入', value: '¥ 2,358.6 亿', growth: 12.5, icon: 'fas fa-chart-line' },
  { title: '累计发生营业成本', value: '¥ 1,892.3 亿', growth: 8.3, icon: 'fas fa-money-bill-wave' },
  { title: '实现营业利润', value: '¥ 466.3 亿', growth: 15.2, icon: 'fas fa-coins' }
]);

const highTechStats = ref([
  { title: '高企培育入库企业数', value: '18,562' },
  { title: '高新技术企业申请成功数', value: '15,847' },
  { title: '到期自动出库数', value: '2,715' }
]);

onMounted(() => {
  // 初始化图表
  if (economicTrendChart.value) {
    const chart = echarts.init(economicTrendChart.value);
    chart.setOption({
      animation: false,
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross'
        }
      },
      legend: {
        data: ['GDP', '增长率']
      },
      xAxis: {
        type: 'category',
        data: ['2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022', '2023', '2024', '2025']
      },
      yAxis: [
        {
          type: 'value',
          name: 'GDP(亿元)',
        },
        {
          type: 'value',
          name: '增长率(%)',
          splitLine: {
            show: false
          }
        }
      ],
      series: [
        {
          name: 'GDP',
          type: 'bar',
          itemStyle: {
            color: '#2563eb'
          },
          data: [1200, 1350, 1500, 1680, 1850, 1920, 2150, 2380, 2600, 2850, 3100]
        },
        {
          name: '增长率',
          type: 'line',
          yAxisIndex: 1,
          itemStyle: {
            color: '#2563eb'
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(37, 99, 235, 0.3)'
              },
              {
                offset: 1,
                color: 'rgba(37, 99, 235, 0.05)'
              }
            ])
          },
          data: [8.5, 8.2, 7.8, 7.5, 6.8, 5.2, 6.5, 6.8, 7.2, 7.5, 7.8]
        }
      ]
    });
    charts.push(chart);
  }

  if (energyConsumptionChart.value) {
    const chart = echarts.init(energyConsumptionChart.value);
    chart.setOption({
      animation: false,
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['电力能耗', '能源能耗']
      },
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
      },
      yAxis: {
        type: 'value',
        name: 'kwh'
      },
      series: [
        {
          name: '电力能耗',
          type: 'line',
          smooth: true,
          itemStyle: {
            color: '#2563eb'
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(37, 99, 235, 0.3)'
              },
              {
                offset: 1,
                color: 'rgba(37, 99, 235, 0.05)'
              }
            ])
          },
          data: [120, 132, 145, 160, 168, 175, 182, 188, 185, 178, 170, 165]
        },
        {
          name: '能源能耗',
          type: 'line',
          smooth: true,
          itemStyle: {
            color: '#64748b'
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(100, 116, 139, 0.3)'
              },
              {
                offset: 1,
                color: 'rgba(100, 116, 139, 0.05)'
              }
            ])
          },
          data: [95, 105, 115, 125, 130, 138, 142, 145, 140, 135, 130, 125]
        }
      ]
    });
    charts.push(chart);
  }

  if (enterpriseOverviewChart.value) {
    const chart = echarts.init(enterpriseOverviewChart.value);
    chart.setOption({
      animation: false,
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      color: ['#2563eb', '#64748b', '#94a3b8', '#cbd5e1', '#e2e8f0'],
      series: [
        {
          type: 'pie',
          radius: '50%',
          data: [
            {value: 45, name: '有限责任公司'},
            {value: 25, name: '股份有限公司'},
            {value: 15, name: '国资企业'},
            {value: 10, name: '外资企业'},
            {value: 5, name: '其他类型'}
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    });
    charts.push(chart);
  }

  if (environmentalProtectionChart.value) {
    const chart = echarts.init(environmentalProtectionChart.value);
    chart.setOption({
      animation: false,
      series: [
        {
          type: 'gauge',
          progress: {
            show: true,
            width: 18
          },
          axisLine: {
            lineStyle: {
              width: 18
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            length: 15,
            lineStyle: {
              width: 2,
              color: '#999'
            }
          },
          pointer: {
            icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.23010 2092.40383,617.34993 L2092.40383,617.34993 C2092.40383,618.46976 2091.48372,619.38987 2090.36389,619.38987 L2090.36389,619.38987 C2089.24406,619.38987 2088.32395,618.46976 2088.32395,617.34993 L2088.32395,617.34993 C2088.32395,616.23010 2089.24406,615.30999 2090.36389,615.30999 Z',
            length: '75%',
            width: 16,
            offsetCenter: [0, '5%']
          },
          axisLabel: {
            color: '#464646',
            fontSize: 20,
            distance: -60,
            formatter: function (value: number) {
              if (value === 0) {
                return '优';
              }
              else if (value === 50) {
                return '良';
              }
              else if (value === 100) {
                return '差';
              }
              return '';
            }
          },
          title: {
            offsetCenter: [0, '30%'],
            fontSize: 20
          },
          detail: {
            fontSize: 30,
            offsetCenter: [0, '0%'],
            valueAnimation: true,
            formatter: function (value: number) {
              return Math.round(value);
            },
            color: 'inherit'
          },
          data: [{
            value: 35,
            name: 'API'
          }]
        }
      ]
    });
    charts.push(chart);
  }

  if (highTechEnterpriseChart.value) {
    const chart = echarts.init(highTechEnterpriseChart.value);
    chart.setOption({
      animation: false,
      color: ['#2563eb', '#e2e8f0'],
      series: [
        {
          type: 'pie',
          radius: ['65%', '80%'],
          avoidLabelOverlap: false,
          label: {
            show: true,
            position: 'center',
            formatter: '完成率：50%',
            fontSize: 16,
            color: '#333'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '30',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            {value: 50, name: '完成率'},
            {value: 50, name: '剩余'}
          ]
        }
      ]
    });
    charts.push(chart);
  }

  window.addEventListener('resize', handleResize);
});

const handleResize = () => {
  charts.forEach(chart => chart.resize());
};

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
  charts.forEach(chart => chart.dispose());
});
</script>

<style scoped>
:root {
  --el-menu-hover-bg-color: rgba(37, 99, 235, 0.1);
  --el-menu-active-color: #2563eb;
  --el-menu-text-color: #64748b;
}

body {
  min-height: 1024px;
  background: #f8fafc;
}

.chart-container {
  width: 100%;
  height: 300px;
}

.el-menu-item.is-active {
  background-color: rgba(37, 99, 235, 0.1) !important;
  border-left: 4px solid #2563eb !important;
}

.el-input__inner {
  height: 40px !important;
}

.bg-primary {
  background-color: #2563eb !important;
}

.text-primary {
  color: #2563eb !important;
}
</style>